<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>iFrame异步文件上传</title>
</head>

<body>
    <h1>iFrame异步文件上传</h1>
    <form method="post" enctype="multipart/form-data">
        用户名:
        <input type="text" name="username" />
        <br /> 上传头像:
        <input type="file" name="uploadphoto" onchange="startUpload(this.form)" />
        <iframe style="display:none" mce_style="display:none" name="uploadframe"></iframe>
        <input type="hidden" id="photo" name="photo" value="" />
        <div id="displayphoto"></div>

        <input type="submit" name="submitted" value="提交" onclick="formSubmit(this.form)" />
    </form>
    <?php //页面提交后显示相关信息 if (isset($_POST[ 'submitted'])) { $html='<hr /><p>上传成功！</p>' ; $html .='<p>用户名：' .htmlspecialchars($_POST[ 'username']). '</p>'; $html .='<p>头像地址：' .htmlspecialchars($_POST[ 'photo']). '</p>'; $html .='<div><img src="' .htmlspecialchars($_POST[ 'photo']). '" mce_src="'.htmlspecialchars($_POST[ 'photo']). '" /></div><hr />'; echo $html; } ?>
</body>

</html>
<mce:script type="text/javascript">
    <!--
//选择了文件后开始异步上传
function startUpload(oForm) {
    document.getElementById('displayphoto').innerHTML = 'Loading...';
    oForm.action = 'proceedupload.php';
    oForm.target = 'uploadframe';
    oForm.submit();
}
//整个页面的提交
function formSubmit(oForm) {
    oForm.action = document.URL;
    oForm.target = '_self';
    oForm.submit();
}
// -->
</mce:script>
